<template>
  <div class="my-daily" name="myDaily">
    <div class="title">待办任务</div>
    <div class="demo-collapse">
      <el-scrollbar height="100%">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item v-for="item in projectTime" :key="item.id" :title="item.name" :name="`${item.id}`">
            <div class="collapse-cot" v-for="item1 in item.value" :key="item1.id">
              <div class="tit">
                {{ item1.name ? item1.name : "--" }}
              </div>
              <div class="status">
                <div class="project-name">
                  <el-icon><Notebook /></el-icon>
                  <span>{{ item1.projectName }}</span>
                </div>
                <span class="status-name" :style="`background: ${taskStatusColor(item1.status)}`">{{
                  getName(item1.status)
                }}</span>
                <span class="status-time">
                  {{ item1.planStartTime ? dayjs(item1.planStartTime).format("YYYY.MM.DD") : "--" }}~{{
                    item1.planEndTime ? dayjs(item1.planEndTime).format("YYYY.MM.DD") : "--"
                  }}
                </span>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue";
import mittBus from "@/utils/mittBus";
import { useDict } from "@/hooks/useDict";
import dayjs from "dayjs";
// api
import { getListAllSubtasksByUserId } from "@/api/modules/project";
// 变量
const activeNames = ref(["4", "1", "2", "3", "5"]);
const projectTime = ref([
  {
    id: 4,
    key: "delayTasks",
    name: "延期"
  },
  {
    id: 1,
    key: "todayTasks",
    name: "今天"
  },
  {
    id: 2,
    key: "weekTasks",
    name: "本周"
  },
  {
    id: 3,
    key: "monthTasks",
    name: "本月"
  },
  {
    id: 5,
    key: "otherTasks",
    name: "其他"
  }
]);
// hook
const { getDict } = useDict(["taskStatus"]);
// 方法
const taskStatusColor = (val: string) => {
  switch (val) {
    case "1790295339517870080": // 未开始
      return "#999999 ";
    case "1790295366042648576": // 进行中
      return "#5378F6";
    case "1790295395008512000": // 搁置中
      return "#F65353";
    case "1790295418777632768": // 已完成
      return "#74D98C";
  }
};
const getName = status => {
  const nameObj = getDict("taskStatus")?.find(item => item.id === status);
  return nameObj && nameObj.name;
};
const handleChange = (val: string[]) => {
  console.log(val);
};

mittBus.on("UserIdEmit", async userId => {
  const { data } = await getListAllSubtasksByUserId({ userId: userId });
  const projectTaskModelMap = (data && data.projectTaskModelMap) || {};
  Object.keys(projectTaskModelMap).forEach(item => {
    const index = projectTime.value.findIndex(itm => itm.key === item);
    projectTime.value[index].value = projectTaskModelMap[item];
  });
  mittBus.emit("totalEmit", (data && data.projectTaskCount) || {});
});

onMounted(() => {});
onUnmounted(() => {
  mittBus.off("UserIdEmit");
});
</script>
<style scoped lang="scss">
.my-daily {
  display: flex;
  flex: 1;
  flex-flow: column nowrap;

  // width: 100%;
  height: 100%;
  user-select: none;

  // height: 90%;
  .title {
    box-sizing: border-box;
    flex: 0 0 72px;

    // width: 100%;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 400;
    line-height: 72px;
    color: #333333;
    text-align: left;
    background: #ffffff;
  }
  .demo-collapse {
    flex: 1;
    width: 100%;
    height: 0;
    overflow: auto;
  }
  .el-collapse {
    --el-collapse-header-height: 64px;
    --el-collapse-header-font-size: 14px;
    --el-collapse-header-text-color: #666666;
    :deep(.el-collapse-item__header) {
      padding: 0 30px;
    }
    :deep(.el-collapse-item__content) {
      padding-bottom: 0;
    }
  }
  .el-collapse-item {
    box-sizing: border-box;
  }
  .collapse-cot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: border-box;
    height: 64px;
    padding: 0 20px 0 56px;
    line-height: 64px;
    border-bottom: 1px solid #f2f2f2;
    &:last-child {
      border-bottom: none;
    }
    .tit {
      flex: 1;
      margin-right: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .status {
      display: flex;
      flex: 0 0 480px;
      align-items: center;
      justify-content: flex-end;
      .project-name {
        display: flex;
        align-items: center;
        span:last-child {
          width: 130px;
          margin-left: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .status-time {
        margin-left: 40px;
      }
      .status-name {
        height: 24px;
        padding: 0 18px;
        margin-left: 40px;
        font-size: 12px;
        line-height: 24px;
        color: #ffffff;
        background: #f8d27c;
        border-radius: 14px;
      }
    }
  }
}
</style>
